<template>
    <div :class="`divTwo ${isClass(index || 0)}`">
        <img :src="typeImg(index)" alt="">
        {{ title }}
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import icon_chanpinyibu from '@/assets/operation/icon_chanpinyibu.png'
import icon_chanpinerbu from '@/assets/operation/icon_chanpinerbu.png'
import icon_chanpinsanbu from '@/assets/operation/icon_chanpinsanbu.png'
import icon_chanpinsibu from '@/assets/operation/icon_chanpinsibu.png'
const props = defineProps(['title', 'imgUrl', 'index'])

const typeImg = (status: Number) => {
    const num = Number(status) || 0
    if (num % 4 === 0) {
        return icon_chanpinyibu
    } else if (num % 4 === 1) {
        return icon_chanpinerbu
    } else if (num % 4 === 2) {
        return icon_chanpinsanbu
    } else {
        return icon_chanpinsibu
    }
}

const isClass = (status: Number) => {
    const num = Number(status) || 0
    if (num % 4 === 0) {
        return 'lan'
    } else if (num % 4 === 1) {
        return 'red'
    } else if (num % 4 === 2) {
        return 'lv'
    } else {
        return 'cheng'
    }
}
</script>

<style lang="less" scoped>
.divTwo {
    width: 102px;
    height: 28px;
    padding-left: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;

    img {
        width: 16px;
        height: 17px;
        margin-right: 10px;
    }
}

.lan {
    background: #EBF4FF;
    color: #0094FF;
}

.red {
    background: #FDE7E7;
    color: #FC2540;
}

.lv {
    background: #E7FDEE;
    color: #19D11B;
}

.cheng {
    background: #FFE9E1;
    color: #FF5A1A;
}
</style>